<template>
	<view>
		<view class="top-search">
			<uni-nav-bar backgroundColor="white" :fixed="true" color="black" borderColor="#efefef" shadow status-bar :title="title" leftIcon="closeempty" @clickLeft="on_close()"/>
			<scroll-view class="tab-view" scroll-x="true">
				<view :class="['tab-view-item',tabIndex==0?'tab-view-item-active':'tab-view-item']" @tap="onTab(0)">
					<view>全部<text space="nbsp">&nbsp;{{zsl}}</text></view>
				</view>
				<view :class="['tab-view-item',tabIndex==1?'tab-view-item-active':'tab-view-item']" @tap="onTab(1)">
					<view>未启动<text space="nbsp">&nbsp;{{wqd}}</text></view>
				</view>
				<view :class="['tab-view-item',tabIndex==2?'tab-view-item-active':'tab-view-item']" @tap="onTab(2)">
					<view>需求分析<text space="nbsp">&nbsp;{{xqfx}}</text></view>
				</view>
				<view :class="['tab-view-item',tabIndex==3?'tab-view-item-active':'tab-view-item']" @tap="onTab(3)">
					<view>系统设计<text space="nbsp">&nbsp;{{xtsj}}</text></view>
				</view>
				<view :class="['tab-view-item',tabIndex==4?'tab-view-item-active':'tab-view-item']" @tap="onTab(4)">
					<view>编码阶段<text space="nbsp">&nbsp;{{kfz}}</text></view>
				</view>
				<view :class="['tab-view-item',tabIndex==5?'tab-view-item-active':'tab-view-item']" @tap="onTab(5)">
					<view>运行维护<text space="nbsp">&nbsp;{{yxwh}}</text></view>
				</view>
			</scroll-view>
		</view>
		<view :style="'height:'+top_height+'px'"></view>
		
		<view style="height: 5px;"></view>
		<view class="card">
			<block  v-for="(item, index) in listInfo" :key="index">
				<view style="min-height: 90px;background-color: white;display: flex;flex-direction: row;">
					<view style="width: 3%;"></view>
					<view style="width: 94%;padding-top: 8px;color: #808080;">
						<view style="height: 2px;"></view>
						<view style="display: flex;flex-direction: row;">
							<view style="width: 60%;">{{item.xmmc}}</view>
							<view style="width: 40%;display: flex;flex-direction: row;justify-content: flex-end;">
								<view><image src="../../static/my-ico/fzr.png" style="width: 18px;height: 18px;"></image></view>
								<view>{{item.fzr.xm}}</view>
							</view>
						</view>
						<view style="height: 2px;"></view>
						<view style="display: flex;flex-direction: row;">
							<view style="width: 100%;" v-if="item.xmZtxxId==0">
								{{item.xmZtxx.name}}
							</view>
							<view style="width: 100%;" v-if="item.xmZtxxId==1">
								<view style="display: flex;flex-direction: column;">
									<view style="color: #85d565;">{{item.xmZtxx.name}}</view>
									<view style="height: 5px;"></view>
									<view>需求分析开始时间：{{item.xqfxKsrq}}</view>
									<view style="height: 5px;"></view>
									<view>需求分析预计完成时间：{{item.xqfxJhwcrq}}</view>
								</view>
								<view style="height: 5px;"></view>
								<view>需求分析参与人员：{{item.zgxxnamesWithZt}}</view>
							</view>
							<view style="width: 100%;" v-if="item.xmZtxxId==2">
								<view style="display: flex;flex-direction: column;">
									<view style="color: #65d5bd;;">{{item.xmZtxx.name}}</view>
									<view style="height: 5px;"></view>
									<view>系统设计开始时间：{{item.xtsjKsrq}}</view>
									<view style="height: 5px;"></view>
									<view>系统设计预计完成时间：{{item.xtsjJhwcrq}}</view>
								</view>
								<view style="height: 5px;"></view>
								<view>参与人员：{{item.zgxxnamesWithZt}}</view>
							</view>
							<view style="width: 100%;" v-if="item.xmZtxxId==3">
								<view style="display: flex;flex-direction: column;">
									<view style="color: #e9ca55;">{{item.xmZtxx.name}}</view>
									<view style="height: 5px;"></view>
									<view>编码阶段开始时间：{{item.bmjdKsrq}}</view>
									<view style="height: 5px;"></view>
									<view>编码阶段预计完成时间：{{item.bmjdJhwcrq}}</view>
								</view>
								<view style="height: 5px;"></view>
								<view>参与人员：{{item.zgxxnamesWithZt}}</view>
							</view>
							<view style="width: 100%;" v-if="item.xmZtxxId==4">
								<view style="display: flex;flex-direction: column;">
									<view style="color: #4a8ce0">{{item.xmZtxx.name}}</view>
									<view style="height: 5px;"></view>
									<view>上线时间：{{item.xtsxKsrq}}</view>
									<view style="height: 5px;"></view>
								</view>
							</view>
						</view>
						<view style="height: 8px;"></view>
					</view>
					<view style="width: 3%;"></view>
				</view>
				<view style="height: 3px;width: 100%;background-color: #efefef;"></view>
			</block>
		</view>
		<view class="loading" v-if="isOnMore">
			<view><image src="../../static/gif/loading.gif"></image></view>
		</view>
	</view>
</template>

<script>
	var page=1,_self;
	import utils from '../../common/utils'
	export default {
		data() {
			return {
				top_height:'20',
				tabIndex:0,
				listInfo:'',
				lx:'',
				nd:'2025',
				title:'2025年度项目',
                zsl:0,
				wqd:0,
				xtfx:0,
				xtsj:0,
				kfz:0,
				yxwh:0
			}
		},
		methods: {
			// 初始化数据
			initPage: async function () {
				this.$utils.showLoading("加载中...");
				let data = {
					lx:this.lx,
					nd:this.nd,
					timestamp:this.$utils.getTimestamp()
				};
				let enData = this.$utils.encrypt(JSON.stringify(data),uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv);
				let postData = {
					data:""+enData+""
				}
				try {
					//console.info("initPage:"+JSON.stringify(postData));
					let res = await this.$myRequest.post_token(getApp().globalData.getXmNdmx,postData);   // 关键点
					//console.info("initPage获取到的:"+JSON.stringify(res));
					this.$utils.hideLoading();
					if (res.code==0)
					{
						let a = JSON.parse(utils.decrypt(res.data,uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv));
						//console.info("initPage获取到的data:"+JSON.stringify(a));
						this.listInfo = a.xmXmxxList;
						this.zsl = a.xmslMap.ZSL;
						this.wqd = a.xmslMap.WQD;
						this.xqfx = a.xmslMap.XQFX;
						this.xtsj = a.xmslMap.XTSJ;
						this.kfz = a.xmslMap.KFZ;
						this.yxwh = a.xmslMap.YXWH;
						this.title = this.nd+"年度项目概况"
						//console.info("tabIndex:"+this.tabIndex);
					}
					else if (res.code==6){
						uni.setStorageSync('isLogin',false);
						//弹出登录页面
						uni.navigateTo({
							url: '/pages/login/login',
							animationType: 'pop-in',
							animationDuration: 200
						});
					}
					else{
						this.$utils.toast("数据加载失败！");
					}
				} catch (e) {  
					this.$utils.hideLoading();
					//console.info(e);
					this.$utils.toast("数据加载失败！");           
				}
			},
			on_close:function(){
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			onTab:function(index){
				//console.info("index:"+index)
				this.tabIndex = index;
				if (this.tabIndex==0) this.lx="zsl";
				if (this.tabIndex==1) this.lx="wqd";
				if (this.tabIndex==2) this.lx="xqfx";
				if (this.tabIndex==3) this.lx="xtsj";
				if (this.tabIndex==4) this.lx="kfz";
				if (this.tabIndex==5) this.lx="yxwh";
				this.initPage();
			}
		},onLoad(options) {
			_self = this;
			let lx = options.lx;	
			let nd = options.nd;
			_self.lx = lx;
			_self.nd = nd;
			if (lx=="zsl") this.tabIndex=0;
			if (lx=="wqd") this.tabIndex=1;
			if (lx=="xqfx") this.tabIndex=2;
			if (lx=="xtsj") this.tabIndex=3;
			if (lx=="kfz") this.tabIndex=4;
			if (lx=="yxwh") this.tabIndex=5;
		},onShow() {
			this.phone = uni.getStorageSync("userInfo").phone;
			this.initPage();
            //this.sfddbxzf();
		},onReady() {
			let that = this;
			/* 设置当前滚动容器的高，若非窗口的高度，请自行修改 */
			uni.getSystemInfo({
				success:(res)=>{
					let info = uni.createSelectorQuery().select(".top-search");
					info.boundingClientRect(function(data) { 
						//console.info("高度："+data.height);
						that.top_height = data.height;
					}).exec()
				}
			});
		}
	}
</script>

<style>
	.top-search{
		width: 100%;
		background-color: white;
		position: fixed;
		display: inline-block;
		color: #292933;
		z-index: 9999;
	}
	.top-title{
		display: flex;
		flex-direction: row;
		height: 35px;
		color: #292933;
	}
	.top-title-ico{
		width: 10%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.top-title-text{
		width: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* 顶部选项卡 */
	.tab-view{
		background-color: white;
		width: 100%;
		height: 40px;
		white-space: nowrap;
	}
	.tab-view-item{
		width: 100px;
		height: 38px;
		display: inline-block;
		color: #8a8999;
	}
	.tab-view-item-active{
		width: 100px;
		height: 38px;
		display: inline-block;
		line-height: 36px;
		color: #292933;
	}
	.tab-view-item-active view{
		text-align: center;
		width: 50px;
		color: #348fe4;
		border-bottom: 3px solid #348fe4;
		margin-left: 25%;
	}
	.tab-view-item view{
		text-align: center;
		width: 50px;
		margin-left: 25%;
	}
	.card{
		width: 100%;
		background-color: white;
		height: auto;
	}
	.card-item{
		width: 100%;
		background-color: white;
	}
	.card-item-1{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.card-item-2{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.card-item-3{
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1px solid #eeeeee;
	}
	.btn-view{
		width: 87%;
		display: flex;
		justify-content: flex-end;
	}
	.zf-btn{
		width: 80px;
		height: 33px;
		display: flex;
		line-height: 33px;
		justify-content: center;
		border-radius: 25px;
		border: 1px solid #FF3228;
		font-size: 16px;
		color: #FF3228;
		background-color: white;
	}
	.tk-btn{
		width: 80px;
		height: 33px;
		display: flex;
		line-height: 33px;
		justify-content: center;
		border-radius: 25px;
		border: 1px solid #006699;
		font-size: 16px;
		color: #006699;
		background-color: white;
	}
	.loading{text-align:center; line-height:80px;height: 80px;background-color: white;}
	.loading image{
		width: 15px;
		height: 15px;
	}
</style>
